<template>
  <div class="site-manage">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="姓名" style="width: 160px">
        <el-input v-model="queryForm.name" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onAddStation">添加</el-button>
      </el-form-item>
    </el-form>
    <DataTable
      class="no-search-table-container"
      :hasIndex="true"
      :tableHead="tableHead"
      :tableData="tableData"
      :isHasPagination="true"
      :border="true"
      :total="total"
      page-size="queryForm.size"
      :currentPage="queryForm.page"
      @changeCurrentPage="handleCurrentChange">
      <el-table-column
        label="操作"
        align="center"
        prop="roleName">
        <template #default="scope">
          <el-button
            size="small" type="warning"
            @click="edit(scope.$index, scope.row)">编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon-color="#626AEF"
            title="确定要删除这个站点吗?"
            @confirm="remove(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </DataTable>

    <el-dialog :title="dialogTitle" v-model="showAddDialog" width="450px"
               :close-on-click-modal="false">
      <MailAddDialog :data="currentStation" v-if="showAddDialog"></MailAddDialog>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import {ref,Ref,UnwrapRef} from 'vue'
  import {ElMessage} from "element-plus";
  import {deleteMail, pageMail} from "@/api/message";
  import MailAddDialog from './MailAddDialog.vue'

  const queryForm: Ref<UnwrapRef<any>> = ref({
    name: '',
    page: 0,
    size: 15
  })
  const showAddDialog = ref(false)
  const current = ref(0)
  const total = ref(100)
  const dialogTitle = ref("")
  const currentStation = ref({})

  const tableHead = [
    {
      prop: 'name',
      label: '姓名',
      width: '100px'
    }, {
      prop: 'mail',
      label: '邮箱',
      width: '150px'
    }
  ]
  const tableData: Ref<any> = ref([])
  let allData: Array<any> = []

  const search = () => {
    getDatas()
  }

  const filter = () => {
    let value = queryForm.value;
    tableData.value = allData.filter((item: any) => {
      return (!value.id || item.id.indexOf(value.id) > -1) && (!value.name || item.name.indexOf(value.name) > -1)
    })
  }

  const onAddStation = () => {
    dialogTitle.value = '添加设备'
    currentStation.value = {}
    showAddDialog.value = true
  }

  const handleCurrentChange = (page: number) => {
    queryForm.value.page = page;
    getDatas()
  }

  const getDatas = () => {
    let value = queryForm.value;
    let params: any = {page: value.page, size: value.size}
    if (value.id)
      params.id = value.id
    if (value.name)
      params.name = value.name
    pageMail(params)
      .then(resp => {
        if (resp.code == 200) {
          tableData.value = resp.data.records
          total.value = resp.data.total
        } else {
          tableData.value = []
        }
      })
  }

  const edit = (index: number, row: any) => {
    currentStation.value = row;
    dialogTitle.value = '修改设备信息'
    showAddDialog.value = true
  }

  const remove = (index: number, row: any) => {
    deleteMail({id:row.id})
  }

  getDatas()
</script>

<style scoped lang="scss">

</style>
